<!DOCTYPE html>
<html lang="en">

<head>
	
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="utf-8" />
		<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css" rel="stylesheet"> -->
		<link href="../vendor/bootstrap-grid.css" rel="stylesheet">
		<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/favicon.ico">
		<link rel="icon" type="image/png" href="../assets/img/favicon.ico">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>数据资产管理平台</title>
		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
			name='viewport' />


		<!-- Font Awesome Icons -->

		<!-- Main CSS -->
		<link href="../assets/css/main.css" rel="stylesheet" />
		<link href="../assets/layui/css/layui.css" rel="stylesheet">
		<!-- Animation CSS -->
		<link href="../vendor/aos.css" rel="stylesheet" />
		<style>
			.demo-tree {
				border: 1px solid #999;
			}

			.layui-tree-entry {
				height: auto;
			}
		</style>
	</head>

<body>


	<main class="container">

		<!--------------------------------------
PRICING
--------------------------------------->
		<section class="pt-4 pb-5">
			<div class="col-md-12" id="probation">
				<form id="form1" class="layui-form" lay-filter="applyMadeDIYForm">
					<div class="row form-group">
						<div class="col">
							<label>定制标题：</label>
							<input type="text" class="form-control" placeholder="请填写定制标题" required="" name="name">
						</div>
					</div>
					<div class="row form-group">
						<div class="col">
							<label>关联数据通道</label>
							<select class="form-control selectDataSource" name="sourceId" lay-filter="selectDataSource"
								lay-search>
								<option value="">请选择</option>
							</select>
						</div>
					</div>
					<div class="row form-group">
						<div class="col">
							<label>数据用户名称</label>
							<input type="text" class="form-control" placeholder="请选择数据通道" disabled name="sourceName"
								id="sourceName">
						</div>
					</div>
					<div class="row form-group">
						<div class="col">
							<p>共享类型</p>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<input class="form-check-input" type="radio" name="exampleRadios" id="share1"
								value="option1">
							<label class="form-check-label" for="share1">无条件共享</label>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<input class="form-check-input" type="radio" name="exampleRadios" id="share2"
								value="option1">
							<label class="form-check-label" for="share2">需要授权</label>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<input class="form-check-input" type="radio" name="exampleRadios" id="share3"
								value="option1">
							<label class="form-check-label" for="share3">需要确权</label>
							&nbsp;&nbsp;&nbsp;&nbsp;
							<input class="form-check-input" type="radio" name="exampleRadios" id="share4"
								value="option1">
							<label class="form-check-label" for="share4">需要确权授权</label>
						</div>

					</div>
					<div class="row form-group">
						<div class="col">
							<label>设定价格</label>
							<input type="text" class="form-control" placeholder="xxx/面议" required="" name="price">
						</div>
					</div>
					<div class="row form-group" id="TreeDirectory">
						<div class="col">
							<span id="resources">数据资源</span>
							<div id="test" class="demo-tree"></div>
							<button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked"
								style="margin-top: 20px;font-size: 12px;">获取选中节点数据并生成SQL语句</button>
						</div>
						<div class="col">
							<span id="selected">选择数据</span>
							<div id="test2" class="demo-tree"></div>
						</div>
					</div>
					<div class="row form-group">
						<div class="col">
							<label>产品定义：</label><textarea class="form-control" rows="3"
								placeholder="可编辑SLQ语句:select * from table1" id="SQLsentence"
								name="userDefinition"></textarea>
						</div>
					</div>
					<div class="row form-group">
						<div class="col">
							<label>补充说明：</label><textarea class="form-control" rows="3" placeholder="请填写补充说明"
								name="userMessage"></textarea>
						</div>
					</div>
					<div class="row form-group">
						<div class="col">
							<label>联系人：</label>
							<input type="text" class="form-control" placeholder="请填写联系人" required name="username">
							<span></span>
						</div>
						<div class="col">
							<label>联系电话：</label>
							<input type="text" class="form-control" lay-verify="phone" placeholder="请填写联系电话"
								name="phone" required>
								<span></span>
						</div>
					</div>
					<button class="layui-btn submitBtn" style="float: right;">提交</button>
				</form>
			</div>
		</section>



		<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
		<script src="../vendor/jquery.min.js" type="text/javascript"></script>
		<script src="../vendor/popper.min.js" type="text/javascript"></script>
		<script src="../vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
		<script src="../vendor/share.js" type="text/javascript"></script>
		<script src="../js/functions.js" type="text/javascript"></script>
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.bundle.js"></script> -->
		<script src="../vendor/bootstrap.bundle.js"></script>
		<script src="../assets/layui/layui.js" type="text/javascript"></script>
		<script src="../js/tool.js" type="text/javascript"></script>

		<!-- Animation -->
		<script src="../vendor/aos.js" type="text/javascript"></script>
		<script src="../js/leg-tree.js" type="text/javascript" charset="utf-8"></script>

		<script>
			$(function () {
				var DataSource = [];
				//获取DIY定制详情用于修改
				if (parent.window.productId) {
					$.ajax({
       timeout:30000,
						type: 'GET',
						url: window.Http + "/customAudit/" + parent.window.productId,
						headers: {
							'Authorization': "Bearer " + sessionStorage.getItem('Token')
						},
						success: function (res) {
							if (res.code == 200) {
								layui.form.val("applyMadeDIYForm", res.data);
							}
						}
					})
				}
				if (sessionStorage.getItem("ISDIY") == "0") {
					$("#TreeDirectory").addClass("disabledNone")
				}

				//获取数据通道
				// 处理数据通道接口返回的数据获得，layui tree需要的格式
				function handleDatasource(arr) {
					let newArr = []
					arr.forEach(obj => {
						let newa = {}
						newa.title = obj.sourceName
						newa.id = obj.id
						if (obj.datasourceStruct) {
							newa.list = obj.datasourceStruct
							newArr.push(newa)
						} else {
							newa.list = handleDatasource(obj.datasourceStruct)
							newArr.push(newa)
						}
					});
					return newArr
				}
				$.ajax({
       timeout:30000,
					url: window.Http + "/datasourceBase/list/all",
					type: 'GET',
					headers: {
						'Authorization': "Bearer " + sessionStorage.getItem('Token')
					},
					data: { status: 0 },
					success: function (res) {
						if (res.code == 200) {
							if (res.data && res.data.length > 0) {
								let html = "";
								res.data.forEach(function (val, index) {
									html += `<option value="` + val.id + `">` + val.resourceName + `</option>`
								})
								$(".selectDataSource").append(html);
								layui.form.render();
								DataSource = res.data;


							}
						}
					}
				})

				layui.form.on('select(selectDataSource)', function (data) {
					DataSource.forEach(function (val, index) {
						if (data.value == val.id) {
							$("#sourceName").val(val.createBy);
							//数据资源
							getDataSourceInfo(val.id);
						}
					})
				});
				//获取数据通道基本信息
				function getDataSourceInfo(infoId){
					let loading = layer.load(1);
					$.ajax({
       timeout:30000,
						url: window.Http + "/datasourceBase/"+infoId,
						type: 'GET',
						headers: {
							'Authorization': "Bearer " + sessionStorage.getItem('Token')
						},
						success: function (res) {
							layer.close(loading);
							if (res.code == 200) {
								if(res.data.datasourceStructList&&res.data.datasourceStructList.length>0){
									let data = res.data.datasourceStructList;
									data.forEach(function(val,index){
										val.title = val.classAlias;
										val.children = val.datasourceContentList||[];
									})
									layui.use(['tree', 'util'], function () {
										let tree = layui.tree, layer = layui.layer, util = layui.util;
										tree.render({
											elem: '#test',
											data: data,
											id: 'demoId1',
											showCheckbox: true
										});
										util.event('lay-demo', {
											getChecked: function (othis) {
												let checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
												GenerateSQL(checkedData)
												tree.render({
													elem: '#test2',
													data: checkedData
												});
											}
										});
									});
								}
							}
						}
					})
				}



				function GenerateSQL(dataArr) {
					let selectString = '';
					let tableString = '';
					dataArr.forEach(function (item, index) {
						tableString += item.title + " as " + item.title + ",";
						item.children.forEach(function (val, i) {
							selectString += item.title + "." + val.title + ",";
						})
					})
					let str = "select " + selectString + " form " + tableString;
					$("#SQLsentence").val(str);
				}
				// 表单检验
				function check() {
					var regnickn = /^[\u4E00-\u9FA5A-Za-z]{2,10}$/  //别名
					// var regemailn = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/  //邮箱
					let regtel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ //电话号码
					var nickn = $('[name="username"]');
					// var emailn = $('#email');
					var tel = $('[name="phone"]');
					regexp(nickn, regnickn, '请输入联系人');
					// regexp(emailn, regemailn, '请正确输入邮箱');
					regexp(tel, regtel, '请正确输入电话号码');
					// 表单验证的函数
					function regexp(ele, reg, str) {
						$(ele).blur(function () {
							if (!reg.test(this.value)) {
								this.nextElementSibling.style = 'color:red;';
								this.nextElementSibling.innerHTML = str;
								$(".submitBtn").attr('disabled', true)
							} else {
								this.nextElementSibling.innerHTML = ""
								$(".submitBtn").attr('disabled', false)
							}
						})
					};
				}
				check()
				//提交
				$("body").on("click", '.submitBtn', function (e) {
					e.preventDefault();
					var data1 = layui.form.val("applyMadeDIYForm");
					data1.productId = parent.window.productId;
					data1.type = 1;
					$.ajax({
       timeout:30000,
						url: window.Http + "/customizeRequest",
						type: 'POST',
						headers: {
							'Authorization': "Bearer " + sessionStorage.getItem('Token')
						},
						data: JSON.stringify(data1),
						contentType: "application/json",
						success: function (res) {
							if (res.code == 200) {
								layer.msg("申请成功，等待审核！");
								setTimeout(function () {
									let index = parent.layer.getFrameIndex(window.name);
									//再执行关闭
									parent.layer.close(index);
								}, 1000)
							} else {
								layer.msg(res.msg);
							}
						}
					})

				})
			})
		</script>

</body>

</html>
